<template>
	<nav class="navbar yd-flex-h-hC-vC" role="navigation">
		<div class="main-container yd-flex-h-hL-vC">
			<img class="navbar__logo" src="~@/assets/images/logo.png" />
			<ul class="navbar__ul yd-flex">
				<li @click="navbarEvent(index, label)"
					class="cursor font"
					:class="{'is-actived': index === current}"
					v-for="(label, index) in navbar" :key="index"
					>{{label}}</li>
			</ul>
		</div>
		<img @click="rebackTop" title="返回顶部" class="navbar__deng cursor" src="~@/assets/images/deng.png" />
	</nav>
</template>

<script>
import { defineComponent, onMounted, ref } from 'vue';

// 防抖
function debounce(fn, delay = 500) {
  let timer = null;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, delay);
  };
}

export default defineComponent({
	setup() {
		let navbar = ref(['虎年吉祥', '传统文化', '十个一', '照片墙']);
		let current = ref(0);
		let flag = true;

		function rebackTopEvent() {
			function fn() {
				let sTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
        if (sTop > 0) {
          window.requestAnimationFrame(fn);
          window.scrollTo(0, sTop - sTop / 8);
        }
			}
      fn();
    }



		// 导航定位处理
		function scrollToTop(num) {
			const ScrollTop = (number = 0, time) => {
				if (!time) {
					document.body.scrollTop = document.documentElement.scrollTop = number;
					return number;
				}
				const spacingTime = 20; // 设置循环的间隔时间  值越小消耗性能越高
				let spacingInex = time / spacingTime; // 计算循环的次数
				let nowTop =
					document.body.scrollTop + document.documentElement.scrollTop; // 获取当前滚动条位置
				let everTop = (number - nowTop) / spacingInex; // 计算每次滑动的距离
				let scrollTimer = setInterval(() => {
					if (spacingInex > 0) {
						spacingInex--;
						ScrollTop((nowTop += everTop));
					} else {
						clearInterval(scrollTimer); // 清除计时器
						flag = true;
					}
				}, spacingTime);
			};
			ScrollTop(num, 300);
		}
		function anchorEvent(id) {
			scrollToTop(document.getElementById(id).offsetTop + -140);
		}

		// 监听滚动
		let anchorTops = [];
		window.addEventListener("scroll", debounce(() => {
			if(!flag) return;
      let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
      anchorActived(scrollTop);
    }, 20));
		onMounted(() => {
			navbar.value.forEach(id => {
				let info = document.querySelector('#' + id).offsetTop;
				anchorTops.push(info);
			});
		});
		function anchorActived(top) {
			top = top < 0 ? top * -1 : top;
			for(let i = 0; i<anchorTops.length; i++) {
				if(i === 0) {
					top < anchorTops[i] && (current.value = i);
				}else {
					if(top > anchorTops[i - 1] && top < anchorTops[i]) current.value = i;
				}
			}
		}


		// 每次刷新返回顶部
		addEventListener("load", () => {
			flag = false;
			anchorEvent('虎年吉祥');
		}, false);

		return {
			navbar,
			current,
			navbarEvent(index, label) {
				if(current.value === index) return;
				flag = false;
				current.value = index;
				anchorEvent(label);
			},
			rebackTop() {
				rebackTopEvent();
			},
		};
	}
})
</script>

<style scoped>
.navbar {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	width: 100%;
	height: 60px;
	box-shadow: 0 0 20px #BB1314;
	transition: all 0.5s ease-in-out;
	background-color: #BB1314;
}
.navbar.top{
	top: -60px;
}
.navbar__logo{
	width: 48px;
	height: 48px;
	margin-right: 40px;
}
.navbar__deng{
	position: absolute;
	top: 4px;
	right: 18%;
	width: 48px;
	height: 48px;
}
.navbar__ul li {
	width: 100px;
	height: 60px;
	text-align: center;
	line-height: 60px;
	color: #fff;
	font-size: 16px;
}
.navbar__ul li.is-actived {
	color: #ffc610;
	animation: scaleChange 0.5s linear;
}
.navbar__ul li:hover{
	color: #ffc610;
}
@keyframes scaleChange {
	0% {
		transform: scale(0);
	}
	50% {
		transform: scale(.5);
	}
	100% {
		transform: scale(1);
	}
}
</style>
